<!--
 * @Author: lmk
 * @Date: 2021-11-15 10:11:34
 * @LastEditTime: 2021-12-16 11:40:23
 * @LastEditors: lmk
 * @Description: 展会日历
-->
<template>
	<view class="mu-item">
		<view class="u-padding-bottom-30">
			<view class="bg-white">
				<me-tabs v-model="indexCurrent"  :height="76" :tabWidth="250" :tabs="yearTabList" @change="changeYear" activeColor="#765CFE"></me-tabs>
			</view>
		</view>
		<view class="scroll-view" >
			<scroll-view scroll-y="true" scroll-with-animation id="scroll-view" style="height: 100%;" :scroll-top="scrollTop">
				<my-calender :currentYear="currentYear" :calenderList="currentCalenderList" @getCurrentMonthElement="calenderScrollToItem"></my-calender>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {getList} from '@/api/crud.js'
	import MyCalender from './myCalender.vue'
	// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import dayjs from 'dayjs'
	export default {
    name:'muItem',
    components:{
      MyCalender
    },
		props: {
			//添加了高度prop
			navHeight: {
				type: Number,
				default: 0
			},
		},
		// mixins:[MescrollMixin],
		data() {
			return {
				apiModule:'shopApi',
				apiType:'exhibitCalendar',
				name:"getExhibitCalendarsByYear",
				option: {
					use: false
				},
				yearTabList: [{
					name:'2021',
					list:[]
				},{
					name:'2022',
					list:[]
				}],
				indexCurrent:0,
				calenderList:[],//展会日历数据
				option:{use:false},
				scrollTop:0,
				intoViewTop:0,//记录当前月 所需要滚动的高度
			}
		},
		computed: {
			currentYear() {
				return this.yearTabList[this.indexCurrent].name
			},
			currentCalenderList(){
				// return [{
				// 	abbreviation:'成都',
				// 	exhibitId:2,
				// 	beginTime:"2021-12-01",
				// 	endTime:'2021-12-02'
				// },{
				// 	abbreviation:'澳门',
				// 	exhibitId:3,
				// 	beginTime:"2021-12-01",
				// 	endTime:'2021-12-02'
				// },{
				// 	abbreviation:'重庆',
				// 	exhibitId:4,
				// 	beginTime:"2021-12-02",
				// 	endTime:'2021-12-02'
				// },{
				// 	abbreviation:'资阳',
				// 	exhibitId:9,
				// 	beginTime:"2021-12-03",
				// 	endTime:'2021-12-04'
				// },{
				// 	abbreviation:'内江',
				// 	exhibitId:45,
				// 	beginTime:"2021-12-03",
				// 	endTime:'2021-12-04'
				// },{
				// 	abbreviation:'巴中',
				// 	exhibitId:33,
				// 	beginTime:"2021-12-02",
				// 	endTime:'2021-12-04'
				// }]
				return this.yearTabList[this.indexCurrent].list
			}
		},
		created() {
			this.indexCurrent = this.yearTabList.findIndex(val=>val.name===dayjs().format("YYYY")) // 今年
			this.getCalenderList();
		},
		methods: {
			//获取展会日历数据
			getCalenderList(){
				getList({
					year:this.currentYear
				},this.apiType,this.apiModule,this.name).then(res=>{
					this.yearTabList[this.indexCurrent].list = res // 缓存到某一年里的item去
				})
			},
			// 缓存数据 如果切换的时候判断有数据就不用请求了 
			changeYear(index){
				this.indexCurrent = index;
				// this.mescroll.scrollTo(0,0)
				this.scrollTop = 0;
				if(this.currentCalenderList.length==0) this.getCalenderList();
			},
			//设置滚动条到到对应的月份
			calenderScrollToItem(data){
				console.log(data)
				this.$nextTick(()=>{
					//获取滚动条位置
					const scrvId = "#scroll-view"
					const query = wx.createSelectorQuery().in(this)
					query.select(scrvId).scrollOffset()
					query.exec((res)=>{
	  				this.scrollTop = data.top + res[0].scrollTop+Math.random()-(this.navHeight+uni.upx2px(106))
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.year-box{
	height: 76rpx;
	background: #FCFCFC;
	margin: 0 32rpx;
	.year-item-box{
		width: 260rpx;
		padding-left: 90rpx;
		font-size: 26rpx;
		color: #1A1A1A;
	}
	.year-item-box-active{
		color: var(--theme-color);
		font-weight: bold;
	}
}
.bg-white{
	background-color: white;
}
.year-tab-box{
	padding-bottom: 30rpx;
}
.mu-item{
	height: 100%;
	display: flex;
	flex-direction: column;
	.scroll-view{
		flex: 1;
		flex-shrink: 0;
		height: 0;
	}
}
</style>
